<script setup>
import { ref, reactive, toRef, onMounted, computed, watch } from 'vue'
import {postLostList,postLostStatus,postLostSet} from '@/api'
import MyIcon from '@/components/my-icon/index.vue'
import Detail1 from '@/pages/wework/customer/detail/index.vue'
const detail1 = ref(null)
const resetapi=()=>{
	dateValue1.value=[]
	dateValue2.value=[]
	dateValue3.value=[]
	getData(1)
}
const showDetail = (id)=>{
	
	setTimeout(()=>{
		dialogVisible.value = false
  	detail1.value.show(id)
	},5)
}
const value1 = ref(true)
const dateValue1 = ref([])
const dateValue2 = ref([])
const dateValue3 = ref([])
const visible = ref()
const num1 = ref()
const num2 = ref()
const dialogVisible = ref(true)
watch(dateValue3, () => {
	if (dateValue3.value === '') {
		num1.value = null
		num2.value = null
		console.log(num1.value, num2.value, '444')
	}
})
// watch(num1,()=>{
//     if(num1===''){
//         console.log('请输入最小天数')
//     }
// })
const open2 = () => {
	ElMessage({
		message: '请输入最小天数',
		type: 'warning'
	})
}
const open3 = () => {
	ElMessage({
		message: '请输入最大天数',
		type: 'warning'
	})
}
// 输入最大天数和最小天数
const deterMine = () => {
	if (num1.value === null) {
		open2()
		visible.value = false
	} else if (num2.value === null) {
		open3()
		visible.value = false
	} else {
		dateValue3.value = [num1.value,num2.value]
		visible.value = false
	}
}
const onceOpenPopover = () => {
	visible.value = true
	;(num1.value = null), (num2.value = null)
}
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const getData = (val)=>{
	if(val){
		page.value = val
	}
	var lossTime = []
	if (dateValue1.value){
		lossTime = dateValue1.value
	}

	var lossTime = [],addTime = [],days =[]
	if (dateValue1.value){
		lossTime = dateValue1.value
	}
	if (dateValue2.value){
		addTime = dateValue2.value
	}
	if (dateValue3.value){
		days = dateValue3.value
	}
	
    postLostList({
				page:page.value,size:10,
				type:1,lossing_time:lossTime,
				add_time:addTime,days:days
    }).then((res) => {
    // console.log(res.data)
      total.value = res.data.count
	    tableData.value = res.data.item
	// console.log(aothList)
    })
}

const postLostStatusapi=()=>{
	postLostStatus().then(res=>{
		value1.value=res.data
	})
}
const remind=()=>{
	console.log(value1.value)
	postLostSet({status:value1.value}).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
	})
}
postLostStatusapi()
getData()
</script>
<template>
<div>
	<div class="allStyle" v-if="dialogVisible" style="padding:15px;border-radius: 5px;">
		<div class="topStyle">
			<p style="width: 1000px; padding-left: 20px; padding-top: 12px; font-size: 14px; color: #023d81">
				当企业成员被客户删除时，会在客户流失列表中产生一条记录，并给已授权成员推送通知。
			</p>
		</div>
		<div class="centerStyle">
			<div style="margin-right: 5px; margin-top: 2px">被删除提醒</div>
			<div>
				<el-switch v-model="value1" class="mb-2" :active-value="1" @click="remind" :inactive-value="0" :active-text="value1.value == 1 ? '已开启' : '已关闭'" />
				<p style="color: #8c8c8c; font-size: 13px">
					开启后，当企业微信被客户删除时，被删除的企业成员将收到一条消息提醒
				</p>
			</div>
		</div>
		<div class="centerSelectStyle">
			<div class="centerSelectChild">
				<!-- <div class="timeChild">
					<span class="timeChild-label">可用部门:</span>
					<el-popconfirm teleported>
						<template #reference>
							<div class="Child2Style">
								<div class="child2StyleIcon">
									<el-icon>
										<ArrowDown />
									</el-icon>
								</div>
							</div>
						</template>
					</el-popconfirm>
				</div> -->
				<div class="timeChild">
					<span class="timeChild-label">流失时间:</span>
					<el-date-picker
    class="app-date-picker"
		v-model="dateValue1"
		value-format="YYYY-MM-DD"
		format="YYYY-MM-DD"
    type="daterange"
    range-separator="~"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    size="large"
  />
				</div>
				<div class="timeChild">
					<span class="timeChild-label">添加时间:</span>
						<el-date-picker
    class="app-date-picker"
    v-model="dateValue2"
    type="daterange"
    range-separator="~"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    size="large"
  />
				</div>
				<div class="timeChild">
					<span class="timeChild-label" style="width: 125px">添加员工时长:</span>
					<el-popover v-model:visible="visible" placement="bottom" :width="400" :height="400" trigger="click">
						<template #reference>
							<el-input
							:disabled="true"
								v-model="dateValue3"
								:manual="true"
								clearable
								placeholder="请输入天数范围"
								@click="onceOpenPopover"
							></el-input>
						</template>
						<div style="margin-bottom: 20px">请输入天数范围</div>
						<div>
							<el-input-number
								v-model="num1"
								:min="1"
								style="width: 160px"
								controls-position="right"
								size="large"
								:controls="false"
							/>
							<span style="margin: 0 10px">~</span>
							<el-input-number
								v-model="num2"
								:min="1"
								style="width: 160px"
								:controls="false"
								controls-position="right"
								size="large"
							/>
						</div>
						<div>
							<el-button type="primary" style="float: right; margin-top: 20px" @click="deterMine">确定 </el-button>
						</div>
					</el-popover>
				</div>
			</div>
			<div class="centerSelectChild2">
				
				<el-button @click="resetapi">重置</el-button>
				<el-button type="primary" @click="getData(1)">搜索</el-button>
			</div>
		</div>
		<!-- 表格部分 -->
		<div class="tableStyle">
			<div class="tableStyleTop">
				<div style="font-size: 14px; color: #666; font-weight: bold">共{{total}}个流失客户</div>
				<div>
					<el-button type="primary" plain>导出Excel</el-button>
				</div>
			</div>
			<!-- table 部分-->
			<div>
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
					:cell-style="{ fontSize: '14px', padding: '20px 0' }"
				>
					<el-table-column prop="lostCustomers" label="客户流失" width="217">
						<template #default="scope">
							<div style="display: flex; align-items: center">
								<div>
									<el-avatar shape="square" :src="scope.row.avatar" />
								</div>
								<span style="margin-left: 10px">{{ scope.row.name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="customerService" label="所属客服">
						<template #default="scope">
							<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.staff_name }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="CSDepartment" label="客服所述部门"> </el-table-column> -->
					<el-table-column prop="label" label="标签" width="180">
						<template #default="scope">
							<el-tag class="mx-1" type="info" v-for="(item,index) in scope.row.tag_info" :key="index" effect="light">
								{{item }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="lossing_time" label="流失时间" />
					<el-table-column prop="add_time" label="添加时间" />
					<el-table-column prop="days" label="添加员工时长/天" />
					<el-table-column prop="operation" label="操作" width="150px">
						<template #default="scope">
							<ul class="tableOperation">
								<!-- <li>聊天记录</li> -->
								<li @click="showDetail(scope.row.id)">详情</li>
							</ul>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top:10px;margin-bottom:10px" :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
			</div>
		</div>
	</div>
		<Detail1 ref="detail1" @diaUpdate="dialogVisible=true" />
	</div>
</template>
<style>
@import '../../../style/app-component.scss';
* {
	font-size: 14px;
}
.allStyle {
	margin: 20px;
}

.topStyle {
	background-color: #e6f0ff;
	height: 65px;
	border: 1px solid #7db3f2;
}

.centerStyle {
	height: 65px;
	display: flex;
	justify-content: flex-start;
	padding: 20px 0;
}

.centerSelectStyle {
	position: relative;

	display: flex;
	justify-content: space-between;
	height: 80px;
	background-color: #ffffff;
	border-radius: 10px;
	margin-top: 25px;
}

.centerSelectChild {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.timeChild {
	margin-left: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.timeChild-label {
	white-space: nowrap;
	margin-right: 10px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.centerSelectChild2 {
	position: absolute;
	right: 20px;
	line-height: 80px;
}

.tableStyle {
	background-color: #ffffff;
	margin-top: 20px;
	height: 700px;
	border-radius: 10px;
}

.tableStyleTop {
	display: flex;
	justify-content: space-between;
	height: 68px;
	line-height: 68px;
	margin: 0 20px;
}
.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
.el-page-header {
  display:none;
}

</style>
